<script lang="ts" setup>
import { reactive, ref } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { ElMessage } from "element-plus";
import { completeCheckinTask } from "/@/api/task";

type Props = {
  modelValue: boolean;
  completeFormData: any;
};
const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  completeFormData: {}
});
const emit = defineEmits(["update:modelValue", "submit-success"]);
const inputHandle = val => {
  emit("update:modelValue", val);
};

const ruleFormRef = ref<FormInstance>();
const rules = reactive<FormRules>({
  bill_name: [{ required: true, message: "请填写账单名称", trigger: "blur" }],
  bill_rate: [{ required: true, message: "请填写服务费用", trigger: "blur" }],
  completion_time: [
    { required: true, message: "请选择完成时间", trigger: "blur" }
  ]
});

const submit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate(valid => {
    if (valid) {
      const {
        id,
        completion_time,
        identifier,
        user_nid,
        bill_name,
        bill_description,
        quantity,
        bill_rate
      } = props.completeFormData;
      const obj = {
        id,
        completion_time,
        identifier,
        user_nid,
        bill_name,
        bill_description,
        quantity,
        bill_rate
      };
      completeCheckinTask(obj).then(() => {
        ElMessage({
          type: "success",
          message: "操作成功"
        });
        inputHandle(false);
        emit("submit-success");
      });
    } else {
      console.log("error submit!");
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
  inputHandle(false);
};
</script>

<template>
  <el-dialog
    :modelValue="modelValue"
    @update:modelValue="inputHandle"
    title="完成"
    width="20%"
  >
    <span>
      <el-form
        :model="completeFormData"
        label-width="auto"
        label-position="left"
        :rules="rules"
        ref="ruleFormRef"
      >
        <el-form-item label="账单名称:" prop="bill_name">
          <el-input v-model="completeFormData.bill_name" />
        </el-form-item>
        <el-form-item label="账单描述:">
          <el-input v-model="completeFormData.bill_description" />
        </el-form-item>
        <el-form-item label="服务费用:" prop="bill_rate">
          <el-input-number
            v-model="completeFormData.bill_rate"
            :precision="2"
            :min="0"
            :step="0.1"
          />
        </el-form-item>
        <el-form-item label="完成时间:" prop="completion_time">
          <el-date-picker
            v-model="completeFormData.completion_time"
            type="date"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
      </el-form>
    </span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="resetForm(ruleFormRef)">取 消</el-button>
        <el-button type="primary" @click="submit(ruleFormRef)">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
